<template>
<el-container class="main-contain">
  <el-aside width="400px" class="side">
      <div class="avatar-contain">
        <el-image :src="pics" style="width: auto;height: 350px;">
          <template #placeholder>
            <div class="image-slot">暂无数据<span class="dot">...</span></div>
          </template>
        </el-image>
      </div>

      <div class="functions">
        <h2 style="color: #f4f4f5;cursor: default;">个人信息功能页</h2>
        <div class="btns">
          <transition name="editAnime" mode="out-in">
            <template v-if="canEdit">
              <el-button class="fun-btn" type="text" @click="editMode" v-show="canEdit" >
                <i class="fa fa-edit fa-lg" style="position: relative; right:30px;"/>修改信息
              </el-button>
            </template>
          </transition>
          <transition name="saveAnime">
            <template v-if="!canEdit">
              <el-button class="fun-btn" type="text" @click="saveMode" v-show="!canEdit">
                <i class="fa fa-save fa-lg" style="position: relative; right:30px;"/>保存信息
              </el-button>
            </template>
          </transition>
          <el-button class="fun-btn" type="text"><i class="fa fa-user fa-lg" style="position: relative; right:30px;"/>上传头像</el-button>
          <el-button class="fun-btn" type="text" @click="go2Index"><i class="fa fa-home fa-lg" style="position: relative; right:30px;"/>返回首页</el-button>
        </div>
      </div>

  </el-aside>

  <el-main>
    <div class="content-contain">
      <el-card class="info_card base-info">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
            <i class="fa fa-id-card-o fa-lg"></i>
          </div>
        </template>
        <div class="card-content">
          <el-form :model="me" label-position="right" label-width="100px">
            <el-form-item  label="姓名">
              <el-input v-model='me.name' type="text" :disabled="canEdit" ></el-input>
            </el-form-item>

            <el-form-item  label="性别">
              <el-select v-model="me.sex" clearable placeholder="请选择" :disabled="canEdit">
                <el-option v-for="item in sexOptions"
                :key="item.label" :label="item.label" :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="出生日期">
              <el-date-picker v-model="me.birth" type="date" placeholder="选择日期" :disabled="canEdit">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="年龄">
              <el-input
                  v-model="me.age"
                  :min="0"
                  :max="100"
                  label="年龄"
                  readonly
              ></el-input>
            </el-form-item>

          </el-form>
        </div>
      </el-card>

      <el-card class="info_card contact_info">
        <template #header>
          <div class="card-header">
            <span>联系信息</span>
            <i class="fa fa-phone fa-lg"></i>
          </div>
        </template>
        <div class="card-content">
          <el-form :model="me" label-position="right" label-width="100px" >

            <el-form-item label="联系电话">
              <el-input type="text" placeholder="请输入联系电话" clearable v-model="me.tel" :disabled="canEdit">
              </el-input>
            </el-form-item>

            <el-form-item label="联系邮箱">
              <el-input type="email"  placeholder="请输入联系邮箱" clearable v-model="me.email" :disabled="canEdit"></el-input>
            </el-form-item>

            <el-form-item label="联系地址">
              <el-cascader style="width: 300px;" v-model="me.address" clearable placeholder="请选择地址" :options="addrOptions" size="large" @change="showAddr" :disabled="canEdit"></el-cascader>
              <br>
            </el-form-item>

<!--            <el-form-item label="具体地址">
              <el-input type="text" clearable placeholder="请输入具体地址" v-model="suffixAddr" @blur="makeAddr" :disabled="canEdit"></el-input>
            </el-form-item>-->

          </el-form>
        </div>
      </el-card>

      <el-card class="info_card private_info">
        <template #header>
          <div class="card-header">
            <span>隐私信息</span>
            <i class="fa fa-eye-slash fa-lg"></i>
          </div>
        </template>
        <div class="content-contain">
          <el-form :model="me" label-position="right" label-width="100px">
            <el-form-item  label="婚姻状况">
              <el-select v-model="me.ismarid" clearable placeholder="请选择" :disabled="canEdit">
                <el-option v-for="item in maryOptions"
                           :key="item.value" :label="item.label" :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item  label="民族">
              <nation-selector @setNations="setNations" :disabled="canEdit" :nation="me.nation"></nation-selector>
            </el-form-item>

            <el-form-item label="国籍">
              <country-selector @setCountry="setCountry" :disabled="canEdit" :country="me.country"></country-selector>
            </el-form-item>


            <el-form-item label="血型">
              <el-select v-model="me.bloodtype" clearable placeholder="请选择" :disabled="canEdit">
                <el-option v-for="item in bloodOptions" :key="item.label" :label="item.label" :value="item.value" >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>


        </div>
      </el-card>

      <el-card class="info_card account_info">
        <template #header>
          <div class="card-header">
            <span>账户安全</span>
            <i class="fa fa-lock fa-lg"></i>
          </div>
        </template>
        <div class="account-btn">
          <el-button type="warning"  :disabled="canEdit" @click="changeCard">密码修改</el-button>
          <el-button type="danger" :disabled="canEdit" @click="idShow=true">个人身份证绑定</el-button>
          <el-button type="danger" :disabled="canEdit" @click="signOut">退出登录</el-button>
        </div>
      </el-card>
    </div>
  </el-main>

  <transition name="card-show">
      <el-card v-show="loginCardShow" class="login-card">
        <template #header>
          <div class="card-header">
            <span>身份验证</span>
            <i class="fa fa-lock fa-lg"></i>
          </div>
        </template>
        <div class="content-contain">
          <p style="color: #FF6633;">请输入账户密码</p>
          <el-input type="password" label="请输入账户密码" v-model="password"></el-input>
        </div>
        <el-button type="warning" style="margin-top: 20px" @click="checkPass">确认</el-button>
        <el-button type="info" style="margin-top: 20px" @click="loginCardShow=false">退出</el-button>
      </el-card>
    </transition>
  <transition name="card-show">
    <el-card v-show="changeCardShow" class="change-card">
      <template #header>
        <div class="card-header">
          <span>密码修改</span>
          <i class="fa fa-lock fa-lg"></i>
        </div>
      </template>
      <div class="content-contain">
        <p style="color: #FF6633;">请输入原密码</p>
        <el-input type="password" label="请输入旧密码" v-model="oldPass"></el-input>
        <p style="color: #FF6633;">请输入新密码</p>
        <el-input type="password" label="请输入新密码" v-model="newPass"></el-input>
      </div>
      <el-button type="warning" style="margin-top: 20px" @click="confirmChange">确认</el-button>
      <el-button type="info" style="margin-top: 20px" @click="changeCardShow=false">退出</el-button>
    </el-card>
  </transition>
  <transition name="card-show">
    <el-card v-show="idShow" class="login-card">
      <template #header>
        <div class="card-header">
          <span>身份绑定</span>
          <i class="fa fa-lock fa-lg"></i>
        </div>
      </template>
      <div class="content-contain">
        <p style="color: #FF6633;">身份绑定</p>
        <el-input type="text" v-model="me.idno"></el-input>
      </div>
      <el-button type="warning" style="margin-top: 20px" @click="confirmIdNo">确认</el-button>
      <el-button type="info" style="margin-top: 20px" @click="idShow=false">退出</el-button>
    </el-card>
  </transition>
</el-container>
</template>

<script>
import{provinceAndCityData,TextToCode,CodeToText} from 'element-china-area-data'
import nationSelector from '../../components/NationSelector.vue'
import countrySelector from '../../components/CountrySelector.vue'
import {checkPassword, getMyInfo, updateIdNo, updateInfo, updatePass} from "../../api/api";
import {ElMessage} from "element-plus";
import changeUtils from "../../utils/changeUtils";
import {MD5} from 'crypto-es/lib/md5.js'

export default {
  name: "Index",
  components:{nationSelector,countrySelector},
  mounted() {
    let key = localStorage.key(0)
    getMyInfo({},{
      "satoken": localStorage.getItem(key)
    }).then(res=>{
      if (res.ret === "0"){
        this.me = res.userInfo
        if(this.me.ismarid&&this.me.ismarid===1){
          this.me.ismarid = '已婚'
        }else if(this.me.ismarid === 0){
          this.me.ismarid = '未婚'
        }
        else{
          this.me.ismarid = '其他'
        }

        if(this.me.address){
          this.fixAddr.length = 0
          this.fixAddr.push(TextToCode[this.me.address.slice(0,3)].code)
          this.fixAddr.push(TextToCode[this.me.address.slice(0,3)][this.me.address.slice(3)].code)
          this.me.address = this.fixAddr //回显 地区码转地区字
        }

        this.pics = this.me.avatar

        ElMessage.success({
          type: 'success',
          message: '获取信息成功'
        })
      }
      else{
        ElMessage.warning({
          type:'warning',
          message: '您还没有填写信息！请尽快填写'
        })
        this.canEdit = false
      }
    }).catch(err=>{
      console.log(err)
    })
  },
  methods:{
    signOut(){

      this.$confirm('确认退出登录?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText:'返回',
      })
          .then(res=>{
            this.$message({
              type: 'success',
              message: '成功',
            })
            localStorage.clear()
            this.$store.dispatch('user/setStatus',false)
            this.$router.push('/index/home')
          })
          .catch(()=>{
            this.$message({
              type: 'info',
              message: '取消',
            })
          })
    },
    confirmIdNo(){
      updateIdNo({
        idNo: this.me.idno
      },{
        "satoken": localStorage.getItem("satoken")
      }).then(res=>{
        if (res.ret === 1){
          ElMessage.success({
            type:'success',
            message: res.msg
          })
          this.idShow = false
        }else{
          ElMessage.warning({
            type:'warning',
            message: res.msg
          })
        }
      }).catch(err=>{
        console.log(err)
        ElMessage.error({
          type:'error',
          message: err
        })
      })
    },
    confirmChange(){

      if(this.newPass === this.oldPass && this.newPass && this.oldPass){
        this.$message({
          type: 'warning',
          message: '新旧密码一致',
        })
        return 0;
      }

      updatePass({
        oldPass: MD5(this.oldPass).toString(),
        newPass: MD5(this.newPass).toString()
      },{
        "satoken": localStorage.getItem("satoken")
      }).then(res=>{
        if(res.ret === 1){
          this.$notify.success({
            title: '修改成功',
            message: res.msg,
          })
          this.changeCardShow = false
        }else{
          this.$notify.warning({
            title: '修改失败',
            message: res.msg,
          })
        }
      }).catch(err=>{
        console.log(err)
        this.$notify.error({
          title: '发生错误',
          message: err,
        })
      })
      this.newPass = this.oldPass = ''
    },
    changeCard(){
      this.changeCardShow = !this.changeCardShow
    },
    go2Index(){
      this.$confirm('确认退出？变更的修改将不会保存！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText:'返回',
      })
      .then(res=>{
        this.$router.push('/index/home')
        this.$message({
          type: 'success',
          message: '返回首页!',
        })
      })
      .catch(()=>{
        this.$message({
          type: 'info',
          message: '取消退出',
        })
      })
    },
    saveMode(){
      let u = changeUtils.changeData(this.me)
      console.log(u)
      updateInfo({
        ...u //此处不能传 user:u,否则后端接收的是 {user:{id:xx...}}，而不是{id:xx,...}
      },{
        "satoken": localStorage.getItem("satoken")
      }).then(res=>{
        console.log(res)
        if (res.ret==='0'){
          ElMessage.success({
            type: 'success',
            message: res.description
          })

          this.$notify({
            title: '成功',
            message: '保存成功',
            type: 'success',
          })

          this.canEdit = true
          this.$store.dispatch('user/setMe',u)
          localStorage.setItem("me",JSON.stringify(u))

        }else{
          ElMessage.warning({
            type:'warning',
            message: res.description
          })
        }
      }).catch(err=>{
        ElMessage.error({
          type:'error',
          message: err
        })
      })

    },
    checkPass(){
      checkPassword({
        "password":MD5(this.password).toString()
      },{
        "satoken": localStorage.getItem("satoken")
      }).then(res=>{
        console.log(res)
        if (res.ret === "0"){
          this.$notify({
            title: '成功',
            message: '现在，你可以修改个人信息',
            type: 'success',
          })
          this.loginCardShow = false
          this.canEdit = false
          this.password = ''
        }
        else {
          this.$notify.error({
            title: '失败',
            message: '密码错误',
          })
          return -1;
        }
      }).catch(err=>{
        console.log(err)
      })
    },
    editMode(){
      this.loginCardShow = !this.loginCardShow
    },
    setCountry(msg){
      this.me.country = msg
    },
    setNations(msg){
      this.me.nation = msg
    },
    /*makeAddr(){
      this.me.address = '' //每次修改清空，防止重复插入地址
      this.prefixAddr.forEach((value) => {
        this.me.address = this.me.address + CodeToText[value]
      })
      this.me.address += this.suffixAddr
      console.log(this.me.address)
    },*/
    showAddr(value){
      console.log(value)
    }
  },
  data(){
    return{
      password:'',
      newPass:'',
      oldPass:'',
      idno:'',
      idShow: false,
      loginCardShow: false,
      changeCardShow:false,
      canEdit: true,
      pics:'',
      fixAddr:[],//存的三级地址码，需要转换

      addrOptions:provinceAndCityData,
      maryOptions:[
        {
          label:'未婚',
          value: 0
        },
        {
          label:'已婚',
          value: 1
        },
        {
          label: '其他',
          value: -1
        }
      ],
      bloodOptions:[
        {
          label:'O型',
          value:'O',
        },
        {
          label:'A型',
          value:'A',
        },
        {
          label:'B型',
          value:'B',
        },
        {
          label:'AB型',
          value:'AB',
        },
        {
          label:'不明',
          value: 'null',
        },
      ],
      sexOptions:[
        {
          label:'男',
          value: '男',
          icon:'fa-male',
        },
        {
          label:'女',
          value: '女',
          icon: 'fa-female'
        }
      ],
      me:{

      },
    }
  },
  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector('body').setAttribute('style', 'margin:0;padding:0;')
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 去除背景色
    document.querySelector('body').setAttribute('style', '')
    next()
  },

}
</script>

<style scoped>

.saveAnime-leave-active{
  animation: slideOutLeft 1s;
}
.saveAnime-enter-active{
  animation: slideInLeft 1s;
}

.editAnime-enter-active{
  animation: slideInLeft 1s;
}
.editAnime-leave-active{
  animation: slideOutLeft 1s;
}
.card-show-enter-active{
  animation: rollIn 1s;
}
.card-show-leave-active{
  animation: rollOut 0.75s;
}

.change-card{
  position: absolute;
  width: 400px;
  height: 400px;
  left: 40%;
  top: 30%;
  z-index: 2;
}
.login-card{
  position: absolute;
  width: 400px;
  height: 300px;
  left: 40%;
  top: 30%;
  z-index: 2;
}
.account-btn{
  display: flex;
  flex-flow: column;
  align-items: center;
}
.account-btn .el-button{
  width: 200px;
  height: 20px;
  margin-left: 0;
  font-size: 18px;
  letter-spacing: 0.15em;
  margin-top: 10px;
  margin-bottom: 10px;
}
::v-deep(.el-form-item__label){
  font-size: 18px;
  color: #fff;
}
.el-form-item{
  margin-left: 30px;
}
::v-deep(.el-input__inner){
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 16px;
}
.el-input-number,.el-select,.el-input,::v-deep(.el-date-editor){
  width: 250px;
}
::v-deep(.el-form-item__content){
  flex: none;
}

.edit-btn{
  font-size: 20px;
}
.edit-btn:hover{
  color: #ffffff;
}
.card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.functions{
  width:auto;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-between;
}
.btns{
  display: flex;
  flex-flow: column;
}
.fun-btn{
  width: auto;
  margin-left: 0;
  font-size: 25px;
  letter-spacing: 0.15em;
  margin-top: 20px;
}
.fun-btn:hover{
  animation: pulse 1s linear;
  color: #f4f4f5;
  letter-spacing: 0.25em;
  font-size: 30px;
}
.info_card::before{
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  background: url("../../assets/privateInfo.jpg") 0/cover fixed no-repeat;
  z-index: -1;
}
.info_card{
  width: 500px;
  height: 350px;
  margin-bottom: 25px;
  position: relative;
  background: rgba(255,255,255,.25);
  box-shadow: 5px 5px 8px 5px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  z-index: 1;
}
.content-contain{
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
}
.main-contain{
  position: absolute;
  height: 100%;
  width: 100%;
  background: url("../../assets/privateInfo.jpg") 0/cover fixed no-repeat;
}
.side:before{
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  background: url("../../assets/privateInfo.jpg") 0/cover fixed no-repeat;
  z-index: -1;

}
.side{
  position: relative;
  background: rgba(255,255,255,.3);
  box-shadow: 5px 3px 5px 8px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  z-index: 1;
}
</style>